	body,
	html {
	  height: 100%;
	  padding: 0;
	  margin: 0;
	  box-sizing: border-box;
	  overflow: hidden;
	}

	.wraper {
	  width: 260px;
	  height: 260px;
	  margin: 128px auto;
	  perspective: 1000px;
	}

	.cube {
	  height: 100%;
	  width: 100%;
	  position: relative;
	  transform-style: preserve-3d;
	  animation: spin 5s ease-in-out;
	}

	@keyframes spin {
	  from {
	    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	  }

	  to {
	    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	  }
	}

	.cube>div {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0, 0, 0, .8);
	  text-align: center;
	  line-height: 260px;
	  color: #fff;
	  font-size: 48px;
	  border: 2px solid #fff;
	  user-select: none;
	}

	.front {
	  transform: translateZ(130px);
	}

	.end {
	  transform: rotateY(180deg) translateZ(130px);
	}

	.top {
	  transform: rotateX(90deg) translateZ(130px);
	}

	.bottom {
	  transform: rotateX(-90deg) translateZ(130px);
	}

	.left {
	  transform: rotateY(-90deg) translateZ(130px);
	}

	.right {
	  transform: rotateY(90deg) translateZ(130px);
	}